<template>
  <body>

    <div class="top">
      <div style="height: 8px"></div>
      <el-button
        style="margin-left: 65%;"
        type="primary"
        icon="el-icon-s-home"
        size="medium"
        plain
        @click="toHome"
      >
        返回主页
      </el-button>
      <div style="height: 8px"></div>
      <hr />
    </div>

    <div style="height: 100px"></div>
    
    <div style="width: 60%; text-align: center; margin: 0 auto">
      您的问卷已经提交，感谢您的参与！
    </div>

    <div style="height: 20px"></div>

    <div class="headline" v-show="headline!==' '">
        <span>{{ headline }}</span>
    </div>

    <div
      class="problem"
      v-for="(problem,index) in questionnaire"
      :key="index"
      v-show="problem.type==='单选题'||problem.type==='多选题'"
    >

      <div style="height: 40px"></div>

      <p>{{ problem.title }}</p>
      <p style="color: red" v-show="!problem.noneable">*</p>
      <p class="problemType">【{{ problem.type }}】</p>

      <div>

        <el-table
          :data="problem.statistic"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            prop="option"
            label="选项"
            sortable
            width="450"
          ></el-table-column>
          <el-table-column
            prop="numPerOption"
            label="小计"
            sortable
            width="100"></el-table-column>
          <el-table-column
            label="比例"
            width="340"
          >
            <el-progress
              slot-scope="scope"
              :text-inside="true"
              :stroke-width="25"
              :percentage="scope.row.numPerOption/problem.total*100"
            ></el-progress>
          </el-table-column>
        </el-table>

        <div style="height: 10px"></div>

        <div style="height: 50px">
          <div>本题有效填写人次：{{ problem.total }}</div>
        </div>

      </div>

      
    </div>
    <div style="height: 40px"></div>

  </body>
</template>

<script>

export default {

  name: 'VoteResult',
  component: {},

  data() {
      return {

        is_loading: true,

        id: "",

        headline: "",
        questionnaire: []
      };
  },

  mounted() {
    this.is_loading = true;
    this.id = this.$route.query.qnid;
    var that = this;
    this.axios.get("/result/analyze",{qnid: this.id}).then(
      function(response) {
        that.headline = response.data.data.headline;
        response.data.data.questionnaire.forEach((q) => {
          if (q.type === "RADIO" && q.type === "CHECKBOX")
          that.questionnaire.push(q)
        })
        that.questionnaire.forEach(question => {
          if (question.type === "RADIO") question.type = "单选题";
          else if(question.type === "CHECKBOX") question.type = "多选题";
        });
      },
      function () {  }
    )
    .finally(() => this.is_loading = false)
  },

  methods: {
    toHome: function() {
      this.$router.push('/');
    }
  }
}
</script>

<style>

  p {
    display: inline-block;
    margin: 2px;
  }

  .top {
    width: 100%;
    height: 54px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 999;
  }

  .problem {
    width: 60%;
    margin: 0 auto;
  }

  .problemIndex {
    font-weight: bold;
    color: rgb(99, 99, 99);
  }

  .problemType {
    font-weight: 100;
    color: rgb(163, 162, 162);
  }

  .headline {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font: normal bold 35px serif;
  }

</style>